<!-- 
 在 Vue 3 中，组件的嵌套使用是构建复杂用户界面的重要方式。通过将组件嵌套在其他组件中，开发者可以实现更好的代码组织和重用。以下是对 Vue 3 中组件嵌套使用的说明总结：
  1. 组件嵌套的基本概念
  组件嵌套指的是在一个组件的模板中使用另一个组件。这样可以将界面拆分为多个可重用的部分，增强代码的可维护性和可读性。

  2. 嵌套组件的注册
  嵌套组件需要在父组件中注册。可以是局部组件或全局组件。
   2.1 局部组件注册
  在父组件的  `components`  选项中注册子组件：
  <template>
    <div>
      <ChildComponent />
    </div>
  </template>

  <script>
  import ChildComponent from './ChildComponent.vue'; // 导入子组件

  export default {
    components: {
      ChildComponent, // 注册子组件
    },
  };
  </script>
   2.2 全局组件注册
  全局组件可以在应用的入口文件中注册，这样在任何组件中都可以使用：
  import { createApp } from 'vue';
  import App from './App.vue';
  import ChildComponent from './ChildComponent.vue';

  const app = createApp(App);
  app.component('ChildComponent', ChildComponent); // 注册全局组件
  app.mount('#app');
  3. 嵌套组件的使用

  一旦组件被注册，就可以在父组件的模板中使用它：
  <template>
    <div>
      <h1>父组件</h1>
      <ChildComponent />
    </div>
  </template>
  4. 组件传值

  父组件可以通过 Props 向子组件传递数据：
  <template>
    <div>
      <ChildComponent :message="parentMessage" />
    </div>
  </template>

  <script>
  import ChildComponent from './ChildComponent.vue';

  export default {
    data() {
      return {
        parentMessage: '来自父组件的消息',
      };
    },
    components: {
      ChildComponent,
    },
  };
  </script>
  在子组件中，可以使用  `props`  接收传递的数据：
  <template>
    <div>
      <p>{{ message }}</p>
    </div>
  </template>

  <script>
  export default {
    props: {
      message: String,
    },
  };
  </script>

  5. 事件传递
  子组件可以通过  `$emit`  向父组件发送事件，父组件可以监听这些事件：
  // 子组件
  <template>
    <button @click="sendMessage">发送消息</button>
  </template>

  <script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('messageSent', '来自子组件的消息');
      },
    },
  };
  </script>
  父组件监听子组件的事件：
  <template>
    <ChildComponent @messageSent="handleMessage" />
  </template>

  <script>
  export default {
    methods: {
      handleMessage(message) {
        console.log(message);
      },
    },
  };
  </script>

  6. 总结
  - 组件嵌套：通过在一个组件中使用另一个组件来构建复杂界面。
  - 注册方式：可以使用局部注册或全局注册。
  - 传值：父组件通过 Props 向子组件传递数据，子组件通过  `props`  接收。
  - 事件传递：子组件通过  `$emit`  发送事件，父组件监听并处理。
-->
<template>
  <div class="app">
    <app-header></app-header>
    <app-content></app-content>
    <app-footer></app-footer>
  </div>
</template>

<script setup>
import {} from 'vue'

import AppHeader from './components/AppHeader.vue'
import AppContent from './components/AppContent.vue'
import AppFooter from './components/AppFooter.vue'
</script>

<style lang="scss" scoped></style>
